<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Chapter 3 - Creating a responsive animated loading screen</title>

  <link rel="stylesheet" href="styles.css?v=1.0">

</head>

<body>
  <!--Chapter 3 - CSS responsive loader using SVG-->
  <section>
    <svg viewBox="0 0 710 300" width="100%" height="300">
      <rect width="60" height="300" x="0" />
      <rect width="60" height="300" x="65" />
      <rect width="60" height="300" x="130" />
      <rect width="60" height="300" x="195" />
      <rect width="60" height="300" x="260" />
      <rect width="60" height="300" x="325" />
      <rect width="60" height="300" x="390" />
      <rect width="60" height="300" x="455" />
      <rect width="60" height="300" x="520" />
      <rect width="60" height="300" x="585" />
      <rect width="60" height="300" x="650" />
    </svg>
    <h1>Scanning channels</h1>
    <p>This may take a few minutes</p>
    <!--Progress bar-->
    <progress value="32" max="100">32%</progress>
  </section>
</body>

</html>